<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
  .box{
    width: 200px;
    height: 200px;
    background-color: lawngreen;
  }
</style>
<body>
<div id="app">
  <input type="text" v-model="msg">
  {{ msg }}
  <hr>
  <input type="radio" v-model="hobby" value="篮球">
  <input type="radio" v-model="hobby" value="足球">
  {{ hobby }}
  <hr>
  唱歌
  <input type="checkbox" v-model="arr" value="唱歌">
  跳舞
  <input type="checkbox" v-model="arr" value="跳舞">
  rap
  <input type="checkbox" v-model="arr" value="rap">
  打球
  <input type="checkbox" v-model="arr" value="打球">
  骑行
  <input type="checkbox" v-model="arr" value="骑行">
  爬山
  <input type="checkbox" v-model="arr" value="爬山">
  探险
  <input type="checkbox" v-model="arr" value="探险">
  春游
  <input type="checkbox" v-model="arr" value="春游">
  旅行
  <input type="checkbox" v-model="arr" value="旅行"><br/>
  {{ arr }}
  <hr>
  <input type="checkbox" v-model="isShow">
  {{ isShow }}
  {{ isShow?'你真漂亮':'你是好人' }}
  <hr>
  <button @click="xiu">{{ isShow?'消失':'显示' }}</button>
  <div class="box" v-show="isShow"></div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    msg: '你好世界',
    hobby: '',
    arr: [],
    isShow: true
  },
  methods: {
    xiu () {
      this.isShow=!this.isShow
    }
  }
})
</script>
</html>